﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>trajectory</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="bootstrap-tagsinput.css">
	<link href="style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
      <!--
    <div class="col-lg-3">
		<div class="input-group">
		  <input type="text" class="form-control" placeholder="Search for MAC address..." id="macaddress">
		  <span class="input-group-btn">
			<button class="btn btn-default" type="button" id="go">Go!</button>
		  </span>
		</div>
	  </div>
	</div>
      -->
	<div id="mydiv">
		<div id="imgContainer">
			<img id="myimage" src="img/mbs_map.png" class="img-thumbnail">
			<canvas id="mycanvas" width="900px" height="600px"></canvas>
			<div id="iconsHolder"></div>
		</div>
		<div id="positionButtonDiv">
			<p>Zoom : 
				<span>
					<img id="zoomInButton" class="zoomButton" src="img/zoomIn.png" title="zoom in" alt="zoom in" />
					<img id="zoomOutButton" class="zoomButton" src="img/zoomOut.png" title="zoom out" alt="zoom out" />
				</span>
			</p>
			<p>
				<span class="positionButtonSpan">
					<map name="positionMap" class="positionMapClass">
						<area id="topPositionMap" shape="rect" coords="20,0,40,20" title="move up" alt="move up"/>
						<area id="leftPositionMap" shape="rect" coords="0,20,20,40" title="move left" alt="move left"/>
						<area id="rightPositionMap" shape="rect" coords="40,20,60,40" title="move right" alt="move right"/>
						<area id="bottomPositionMap" shape="rect" coords="20,40,40,60" title="move bottom" alt="move bottom"/>
					</map>
					<img src="img/position.png" usemap="#positionMap" />
				</span>
			</p>
		</div>
	</div>
	
	<div id="mymodal" class="modal fade" role="dialog">
	  <div class="modal-dialog">

		<!-- Modal content-->
		<div class="modal-content">
		  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h4 class="modal-title">Add Pushing</h4>
		  </div>
		  <div class="modal-body">
			<div class="form-group">
			  <label for="name">Zone Name:</label>
			  <span id="alertname"></span>
			  <input type="text" class="form-control" id="name">
			</div>
			<div class="form-group">
			  <label for="description">Description:</label>
			  <span id="alertdes"></span>
			  <textarea class="form-control" rows="2" id="description"></textarea>
			</div>
			<div class="form-group">
			  <label for="area">Area:</label>
			  <textarea type="text" class="form-control" rows="1" id="area" disabled></textarea>
			</div>
			<div class="form-group">
			  <label for="name">Tags:</label>
			  <input type="text" value="level 3" data-role="tagsinput" id="tags"/>
			</div>
		  </div>
		  <div class="modal-footer">
		    <button type="button" class="btn btn-info" id="submit">Submit</button>
			<button type="button" class="btn btn-default" data-dismiss="modal" id="close">Close</button>
		  </div>
		</div>

	  </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script src="scripts/jquery-1.11.0.min.js"></script>
	<script src="scripts/e-smart-zoom-jquery.min.js"></script>
	<script src="bootstrap-tagsinput.js"></script>
	<script src="script.js"></script>
	<script>
			$(document).ready(function() {
				
				$('#imgContainer').smartZoom({'containerClass':'zoomableContainer'});
				$('#topPositionMap,#leftPositionMap,#rightPositionMap,#bottomPositionMap').bind("click", moveButtonClickHandler);
  				$('#zoomInButton,#zoomOutButton').bind("click", zoomButtonClickHandler);
				
				function zoomButtonClickHandler(e){
			    	var scaleToAdd = 0.8;
					if(e.target.id == 'zoomOutButton')
						scaleToAdd = -scaleToAdd;
					$('#imgContainer').smartZoom('zoom', scaleToAdd);
			    }
			    
			    function moveButtonClickHandler(e){
			    	var pixelsToMoveOnX = 0;
					var pixelsToMoveOnY = 0;
			
					switch(e.target.id){
						case "leftPositionMap":
							pixelsToMoveOnX = 50;	
						break;
						case "rightPositionMap":
							pixelsToMoveOnX = -50;
						break;
						case "topPositionMap":
							pixelsToMoveOnY = 50;	
						break;
						case "bottomPositionMap":
							pixelsToMoveOnY = -50;	
						break;
					}
					$('#imgContainer').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);
			    }
			});
		</script>
  </body>
</html>